<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* css3新增 */
        .box {
            width: 400px;
            height: 400px;
            border: 10px solid #f00;
            /*css3支持背景半透明的写法*/
            /* background-color: rgba(255,0,0,50%); */
            /* 0.5 */
            /* 
            px 可设置一到两个像素值
            百分比 同像素设置方法相同 设置百分比时 数字参照盒子的宽高属性 
            cover 自动调整缩放比例 把背景图像扩展至足够大 以使背景图像完全覆盖背景区域 如有溢出会被隐藏
            contain 自动调整缩放比例 把图像扩展至最大尺寸 保证图片始终完整显示在背景区域
            */
            background: url(../image/1.png) no-repeat;
            background-size: cover;
            /* background-image: url(), url(); */
        }
        /* 
            背景缩放 background-size 只能单独写
        */
        /* 多背景 一个盒子上可以加载多个图片 中间用逗号隔开 */


    </style>
</head>
<body>
    <div class="box">111</div>
</body>
</html>